<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('机动勤务中心工作督办平台')" />
    <th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <h3  style="text-align: center;font-size: 24px;font-weight: bolder">机动勤务中心工作督办平台</h3>
    <div style="text-align: right;font-size: 14px;">当前时间:<span id="clock"></span></div>
    <div style="text-align: center;margin: 10px;font-size: 20px;font-weight: bolder">总览</div>
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>正在办理: <span th:text="${listCount1}"></span>件</h5>
                </div>
                <div class="ibox-content">
                    <h4 th:each="vo,stat:${list1}">[[${vo['cbbm']}]]: <span th:text="${vo['num']}"></span>件</h4>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>未办理: <span th:text="${listCount2}"></span>件</h5>
                </div>
                <div class="ibox-content">
                    <h4 th:each="vo,stat:${list2}">[[${vo['cbbm']}]]: <span th:text="${vo['num']}"></span>件</h4>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>长期工作: <span th:text="${listCount3}"></span>件</h5>
                </div>
                <div class="ibox-content">
                    <h4 th:each="vo,stat:${list3}">[[${vo['cbbm']}]]: <span th:text="${vo['num']}"></span>件</h4>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>已办结: <span th:text="${listCount4}"></span>件</h5>
                </div>
                <div class="ibox-content">
                    <h4 th:each="vo,stat:${list4}">[[${vo['cbbm']}]]: <span th:text="${vo['num']}"></span>件</h4>
                </div>
            </div>
        </div>
    </div>
    <div style="text-align: center;margin: 10px;font-size: 20px;font-weight: bolder">详细列表</div>
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="complex-form">
                <div class="select-list">
                    <ul>
                        <li>
                            <label style="width: 80px">收文日期：</label>
                            <input type="text" name="swsjDate" class="time-input" placeholder="收文日期"/>
                        </li>
                        <li>
                            <label style="width: 80px">创建时间：</label>
                            <input type="text" name="createDate" class="time-input" placeholder="创建时间"/>
                        </li>
                        <li>
                            <label style="width: 80px">收文字号：</label>
                            <input type="text" name="swzh" />
                        </li>
                        <li>
                            <label style="width: 80px">来文单位：</label>
                            <input type="text" name="lwdw"/>
                        </li>
                        <li>
                            <label style="width: 80px">来文字号：</label>
                            <input type="text" name="lwzh" />
                        </li>
                        <li>
                            <label style="width: 80px">文件标题：</label>
                            <input type="text" name="wjbt" />
                        </li>
                        <li>
                            <label style="width: 80px">领导批示：</label>
                            <input type="text" name="ldps" />
                        </li>
                        <li>
                            <label style="width: 80px">承办部门：</label>
                            <select name="cbbm"  class="form-control">
                                <option value="">--请选择--</option>
                                <option value="指挥">指挥</option>
                                <option value="政工">政工</option>
                                <option value="专项">专项</option>
                                <option value="宣传">宣传</option>
                                <option value="纪委">纪委</option>
                                <option value="综保">综保</option>
                                <option value="一支队">一支队</option>
                                <option value="二支队">二支队</option>
                                <option value="三支队">三支队</option>
                            </select>
                        </li>
                        <li>
                            <label style="width: 100px">首次报送时限：</label>
                            <input type="text" name="scbssjDate" class="time-input" placeholder="首次报送时限"/>
                        </li>
                        <li>
                            <label style="width: 80px">办结时限：</label>
                            <input type="text" name="sbjsjDate" class="time-input" placeholder="办结开始时间"/>
                            <span>-</span>
                            <input type="text" name="ebjsjDate" class="time-input" placeholder="办结结束时间"/>
                        </li>
                        <li class="select-selectpicker">
                            <label style="width: 80px">办理状态：</label>
                            <select name="blzt"  class="form-control">
                                <option  value="">--请选择--</option>
                                <option  value="未办理">未办理</option>
                                <option  value="正在办理">正在办理</option>
                                <option  value="长期工作">长期工作</option>
                                <option  value="已办结">已办结</option>
                                <option  value="不涉及">不涉及</option>
                                <option  value="其他">其他</option>
                            </select>
                        </li>
                        <li>
                            <label style="width: 80px">办理进度：</label>
                            <input type="text" name="bljd" />
                        </li>
                        <li>
                            <label style="width: 80px">承办人：</label>
                            <input type="text" name="cbr" />
                        </li>
                        <li>
                            <label style="width: 80px">备注：</label>
                            <input type="text" name="bz"/>
                        </li>

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm m50" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('complex-form')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
    <div class="btn-group-sm" id="toolbar" role="group">
        <a class="btn btn-success" onclick="$.operate.add(0)">
            <i class="fa fa-plus"></i> 新增
        </a>
    </div>
    <div class="row">
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-select-js" />
<th:block th:include="include :: jquery-cxselect-js" />
<script th:inline="javascript">
    //显示时间
    function showRealTime (){
        var d = new Date();
        var year = d.getFullYear();
        var month = d. getMonth() + 1
        var date = d.getDate();
        var days = new Array("日","一","二","三","四","五","六");
        var day = d.getDay();
        var hour = (d.getHours() < 10) ? ("0" + d.getHours()) : d.getHours();
        var min = (d. getMinutes() < 10) ? ("0" + d.getMinutes()) : d.getMinutes();
        var sec = (d.getSeconds() < 10) ? ("0"+ d.getSeconds()) : d.getSeconds();
        var now = year +'年'+ month +'月'+ date +'日  ' +hour+":"+ min+":"+ sec +  '  星期' + days[day];
        $("#clock").html(now)
    }
    setInterval('showRealTime()',1000);
    $(function() {
        var options = {
            url: "/list",
            createUrl: "/add",
            updateUrl: "/edit/{id}",
            removeUrl: "/remove",
            modalName: "协同办公",
            columns: [
                {
                    title : '序号',
                    align: "center",
                    width: 40,
                    formatter: function (value, row, index) {
                        //获取每页显示的数量
                        var pageSize=$('#bootstrap-table').bootstrapTable('getOptions').pageSize;
                        //获取当前是第几页
                        var pageNumber=$('#bootstrap-table').bootstrapTable('getOptions').pageNumber;
                        //返回序号，注意index是从0开始的，所以要加上1
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                },
                {
                    field : 'swsjDate',
                    title : '收文日期'
                },
                {
                    field : 'createDate',
                    title : '创建时间'
                },
                {
                    field : 'swzh',
                    title : '收文字号'
                },
                {
                    field : 'lwdw',
                    title : '来文单位'
                },
                {
                    field : 'lwzh',
                    title : '来文字号'
                },
                {
                    field: 'wjbt',
                    title: '文件标题'
                },
                {
                    field: 'ldps',
                    title: '领导批示'
                },
                {
                    field: 'cbbm',
                    title: '承办部门'
                },
                {
                    field: 'scbssjDate',
                    title: '首次报送时限'
                },
                {
                    field: 'bjsjDate',
                    title: '办结时限'
                },
                {
                    field: 'blzt',
                    title: '办理状态 '
                },
                {
                    field: 'bljd',
                    title: '办理进度'
                },
                {
                    field: 'cbr',
                    title: '承办人'
                },
                {
                    field: 'bz',
                    title: '备注'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" onclick="$.operate.edit(\'' + row.id + '\')" href="javascript:void(0)"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" onclick="$.operate.remove(\'' + row.id + '\')" href="javascript:void(0)"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });
</script>
</body>
</html>